<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/assets/css/amazeui.css" rel="stylesheet" type="text/css" />

<!--    <link href="/basic/css/demo.css" rel="stylesheet" type="text/css" />-->
    <link href="/css/cartstyle.css" rel="stylesheet" type="text/css" />
    <link href="/css/jsstyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/js/address.js"></script>
    <th:block th:include="common.html :: source"></th:block>
    <script type="text/javascript" src="/js/settlement.js"></script>
    <script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/distpicker.js"></script>
</head>
<body>

<th:block th:include="common.html :: header"></th:block>

<div class="i_bg">
    <div id="settlement">

        <div class="content mar_20">
            <img src="/images/img2.jpg"/>
        </div>
        <div class="content mar_20">
            <div class="two_bg">
                <div class="two_t">
                    <span class="fr"><a href="/cart/getList">修改</a></span>商品列表
                </div>
                <table border="0" class="car_tab" style="width:1110px;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="car_th" width="550">商品名称</td>
                        <td class="car_th" width="150">购买数量</td>
                        <td class="car_th" width="130">小计</td>
                    </tr>

                    <tr th:each="cart:${cartList}">
                        <td align="center">
                            <div class="c_s_img">
                                <img th:src="${cart.fileName}" width="73" height="73"/>
                            </div>
                            <div style="position: relative;right: 40px;top: 30px" th:text="${cart.name}"></div>
                        </td>
                        <td align="center" th:text="${cart.quantity}"></td>
                        <td align="center" class="qprice" style="color:#ff4e00;" th:text="'￥'+${cart.cost}"></td>
                    </tr>

                </table>


                <div class="two_t2" style="position: relative; top: 45px">
                    <span class="fr">
                        <div class="control">
                            <div class="tc-btn createAddr theme-login am-btn am-btn-danger"  >使用新地址</div>
                        </div></span>
                </div>
                <div class="two_t1" style="width: 500px; position: relative;right: 305px;top: 5px">
                    选择地址
                </div>



                <div class="address">
                    <div class="clear"></div>
                    <ul>
                        <div class="per-border"></div>
                        <li class="user-addresslist defaultAddr"  th:each="address:${addressList}" th:if="${address.isdefault==1}" >

                            <div class="address-left">
                                <div class="user DefaultAddr">

										<span class="buy-address-detail">
                                        <span class="buy-user"  th:text="${address.consignee}"></span>
										<span class="buy-phone" th:text="${address.phone}"></span>
										</span>
                                </div>
                                <div class="default-address DefaultAddr">
                                    <span class="buy-line-title buy-line-title-type">收货地址：</span>
                                    <span class="buy--address-detail">
								   <span class="province" th:text="${address.province}"></span>
										<span class="city" th:text="${address.city}"></span>
										<span class="dist" th:text="${address.area}"></span>
										<span class="street" th:text="${address.address}"></span>
										</span>

                                    </span>
                                </div>
                                <ins class="deftip">默认地址</ins>
                            </div>
                            <div class="address-right">
                                <a href="../person/address.html">
                                    <span class="am-icon-angle-right am-icon-lg"></span></a>
                            </div>
                            <div class="clear"></div>

                            <div class="new-addr-btn">
                                <span class="new-addr-bar hidden">|</span>
                                <a th:onclick="getAddress([[${address.id}]])">编辑</a>
                                <span class="new-addr-bar">|</span>
                                <a >删除</a>
                            </div>

                        </li>
                        <div class="per-border"></div>
                        <li class="user-addresslist" th:onclick="giao([[${address.id}]])" th:each="address:${addressList}" th:if="${address.isdefault==0}">

                            <script>

                            </script>

                            <div class="address-left">
                                <div class="user DefaultAddr">

										<span class="buy-address-detail">
                                        <span class="buy-user" th:text="${address.consignee}"></span>
										<span class="buy-phone" th:text="${address.phone}"></span>
										</span>
                                </div>
                                <div class="default-address DefaultAddr">
                                    <span class="buy-line-title buy-line-title-type">收货地址：</span>
                                    <span class="buy--address-detail">
								   <span class="province" th:text="${address.province}"></span>
										<span class="city" th:text="${address.city}"></span>
										<span class="dist" th:text="${address.area}"></span>
										<span class="street" th:text="${address.address}"></span>
										</span>

                                    </span>
                                </div>
                                <ins class="deftip hidden">默认地址</ins>
                            </div>
                            <div class="address-right">
                                <span class="am-icon-angle-right am-icon-lg"></span>
                            </div>
                            <div class="clear"></div>

                            <div class="new-addr-btn">
                                <a th:onclick="setDefault([[${address.id}]])">设为默认</a>
                                <span class="new-addr-bar">|</span>
                                <a th:onclick="getAddress([[${address.id}]])">编辑</a>
                                <span class="new-addr-bar">|</span>
                                <a th:onclick="delClick([[${address.id}]])">删除</a>
                            </div>

                        </li>

                        <div class="per-border"></div>


                    </ul>

                    <div class="clear"></div>
                </div>

                <div class="logistics">
                    <h3 style="position: relative; right: -54px; top: 35px">选择物流方式</h3>
                    <h3 style="position: relative; right: -54px; top: 110px">选择支付方式</h3>
                    <ul class="op_express_delivery_hot">
                        <li data-value="圆通" class="OP_LOG_BTN  " onclick="wuliu(this)"><i class="c-gap-right" style="background-position:0px -468px"></i>圆通<span></span></li>
                        <li data-value="申通" class="OP_LOG_BTN  "onclick="wuliu(this)"><i class="c-gap-right" style="background-position:0px -1008px"></i>申通<span></span></li>
                        <li data-value="韵达" class="OP_LOG_BTN  "onclick="wuliu(this)"><i class="c-gap-right" style="background-position:0px -576px"></i>韵达<span></span></li>
                        <li data-value="中通" class="OP_LOG_BTN op_express_delivery_hot_last "onclick="wuliu(this)"><i class="c-gap-right" style="background-position:0px -324px"></i>中通<span></span></li>
                        <li data-value="顺丰" class="OP_LOG_BTN  op_express_delivery_hot_bottom"onclick="wuliu(this)"><i class="c-gap-right" style="background-position:0px -180px"></i>顺丰<span></span></li>
                    </ul>
                </div>
                <div class="clear"></div>

                <!--支付方式-->
                <div class="logistics">
                    <ul class="pay-list">
                        <li data-value="银联" class="pay card eminem"><img src="/images/wangyin.jpg" />银联<span></span></li>
                        <li data-value="微信" class="pay qq eminem"><img src="/images/weizhifu.jpg" />微信<span></span></li>
                        <li data-value="支付宝" class="pay taobao eminem"><img src="/images/zhifubao.jpg" />支付宝<span></span></li>
                    </ul>
                </div>
                <div class="clear"></div>


                    </table>
                    <table border="0" style="width:900px; margin-top:20px;" cellspacing="0" cellpadding="0">
                        <tr height="70">
                            <td align="right" style="position: relative; top: -25px; right: 35px" >
                                <b style="font-size:14px;">应付款金额：<span id="totalprice" style="font-size:22px; color:#ff4e00;"></span></b>
                                <input type="hidden" name="cost" id="settlement2_totalCost"/>
                            </td>
                        </tr>
                        <tr height="70">
                            <td align="right"><a href="javascript:void(0);" onclick="settlement3();"><img
                                    src="/images/btn_sure.gif" style="position: relative; right: -80px"/></a></td>
                        </tr>
                    </table>


                <div class="theme-popover-mask"></div>
                <div class="theme-popover">

                    <!--标题 -->
                    <div class="am-cf am-padding">
                        <div class="am-fl am-cf" style="position: relative;right: -11px; top: 4px" ><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add address</small></div>
                    </div>
                    <hr/>

                    <div class="am-u-md-12">
                        <form class="am-form am-form-horizontal" style="position: absolute;width: 467px">

                            <div class="am-form-group">
                                <label for="user-name" class="am-form-label">收货人</label>
                                <div class="am-form-content">
                                    <input type="text" id="user-name" placeholder="收货人">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-phone" class="am-form-label">手机号码</label>
                                <div class="am-form-content">
                                    <input id="user-phone" placeholder="手机号必填" type="email">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-name" class="am-form-label">地址</label>
                                <div class="am-form-content" >
                                    <div id="target"><!-- container -->
                                        <select id="province" style="margin-left: 1%;width: 32%;float: left"></select><!-- 省 -->
                                        <select id="city" style="margin-left: 1%;width: 32%;float: left"></select><!-- 市 -->
                                        <select id="area" style="margin-left: 1%;width: 32%;float: left"></select><!-- 区 -->
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-intro" class="am-form-label">详细地址</label>
                                <div class="am-form-content">
                                    <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                    <small>100字以内写出你的详细地址...</small>
                                </div>
                            </div>

                            <div class="am-form-group theme-poptit">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <div class="am-btn am-btn-danger" onclick="addAddress()">保存</div>
                                    <div class="am-btn am-btn-danger close" >取消</div>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        let dizhi=-1;
        let wuliu;
        let zhifu;

        function settlement3() {
            if($('.selected').length<=1){
                alert("请完善订单信息！")
                return false;
            }
            let totalprice = document.getElementById("settlement2_totalCost").value;
            window.location.href="/order/settlement3/"+dizhi+"/"+wuliu+"/"+zhifu+"/"+totalprice;
        }

        function giao(address) {
            dizhi=address;
        }

        $('.OP_LOG_BTN').on('click', function () {

             wuliu =  $(this).data('value');

        });

        $('.eminem').on('click', function () {

            zhifu =  $(this).data('value');

        });

    </script>

    <script type="text/javascript">
        $(function(){
            $('#target').distpicker();
        });
    </script>

    <script>
        function addAddress() {
            let consignee = document.getElementById("user-name").value;
            let phone = document.getElementById("user-phone").value;
            let province = document.getElementById("province").value;
            let city =document.getElementById("city").value;
            let area =document.getElementById("area").value;
            let address = document.getElementById("user-intro").value;

            window.location.href="/userAddress/addAddress/"+consignee+"/"+phone+"/"+province+"/"+city+"/"+area+"/"+address+"/settlement2";
        }
    </script>

    <script>
        function delClick(id) {
            window.location.href="/userAddress/deleteAddress/"+id+"/settlement2";
        }
    </script>

    <script>
        function setDefault(id) {
            window.location.href="/userAddress/setDefault/"+id+"/settlement2";
        }
    </script>

    <script>
        function getAddress(addressId) {
            window.location.href="/userAddress/getAddress/"+addressId+"/settlement2";
        }
    </script>

</div>

<th:block th:include="common.html :: footer"></th:block>
<th:block th:include="common.html :: permit"></th:block>

</body>
</html>